<template>
  <!-- 这是index页面 -->
  <div id="indexID">
    <div class="background_video">
      <video
        class="index_video_hight"
        src="../../public/mp4/0611(18).mp4"
        loop="loop"
        muted
        autoplay="autoplay"
      ></video>
      <div class="main-head">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2 menban">
              <div class="head_division"> 
                <h4 class="head_h4">{{$t("Header.title1")}}</h4> 
              </div>
              <h1>{{$t("Header.content1")}}</h1>
              <router-link :to="{path:'./buildingMaterial'}"><a href="javascript:void(0);" class="btn btn-primary btn-lg">{{$t("Header.button")}}</a></router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="background_video">
      <video
        class="index_video_hight"
        src="../../public/mp4/0611(18).mp4"
        loop="loop"
        muted
        autoplay="autoplay"
      ></video>
      <div class="main-head">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2 menban">
              <div class="head_division"> 
                <h4 class="head_h4">{{$t("Header.title2")}}</h4> 
              </div>
              <h1>{{$t("Header.content2")}}</h1>
              <router-link :to="{path:'./furniture'}"><a href="javascript:void(0);" class="btn btn-primary btn-lg">{{$t("Header.button")}}</a></router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="background_video">
      <video
        class="index_video_hight"
        src="../../public/mp4/shierC(15).mp4"
        loop="loop"
        muted
        autoplay="autoplay"
      ></video>
      <div class="main-head">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2 menban">
              <div class="head_division"> 
                <h4 class="head_h4">{{$t("Header.title3")}}</h4> 
              </div>
              <h1>{{$t("Header.content3")}}</h1>
              <router-link :to="{path:'./brand'}"><a href="javascript:void(0);" class="btn btn-primary btn-lg">{{$t("Header.button")}}</a></router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品 -->
    <section class="portfolio" id="portfolio">
      <div class="container">
          <div class="title text-center">
            <h2>{{$t("Portfolio.title")}}</h2>
            <h6>{{$t("Portfolio.synopsis")}}</h6>
            <p>{{$t("Portfolio.content")}}</p>
          </div>
          <div class="portfolio_ul">
            <ul class="g_row_ul">
              <li v-for="(item,index) in goodsList" :key="item.goods_id" @click="goodsD(goodsList[index].goods_id)">
                <img :src="url+item.goods_image" alt="" >
                <h4 class="portfolio_ul_h4">{{item.title}}</h4>
                <span>{{item.min_price}} 元</span>
              </li>
            </ul>
          </div>
      </div>
    </section>
    <router-link to="./goods" class="more">{{$t("share.viewMore")}}</router-link>
    <div class="index_links"><Links></Links></div>
    <!-- 广告弹框 -->
    <div class="advertisement" v-if="advertisementBool" @scroll.stop.prevent>
      <div class="carousel">
        <i class="el-icon-circle-close" @click="closeAdvertising"></i>
        <el-carousel arrow="never" :autoplay="true" :height="height" :interval="5000">
          <el-carousel-item v-for="item in arrImg" :key="item">
            <img ref="image" :src="url + item">
            <!-- <h3>{{require('./../../public/'+item)}}</h3> -->
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import Links from "./../components/Links.vue";
export default {
  data() {
    return {
      url: "https://mp.uekea.cn/attachment/",
      goodsList: [],
      advertisementBool: false,     // 广告弹框是否显示
      arrImg: ["images/2/2020/09/L3vHY3S5yLLYPp57V3pP75iYh6p5zP.jpg", "images/2/2020/08/TXIZ2uDODudtdGaR1xShcExxGaI1bF.jpg", "images/2/merch/172/KV8Ntl8227SM3LLl488nSnyL82z4yy.jpg"],
      height: "380",       // 轮播图高度
    }
  },
  components: {
    Links,
  },
  methods: {
    // 点击商品，跳转到商品详情
    goodsD(i){
      this.$router.push({"path":"./goodsDetail",query: {id: i}})
    },
    // 打开广告弹框
    openTheAd() {
      document.body.style.overflow="hidden";        // 给body添加 溢出隐藏
    },
    // 关闭广告弹框
    closeAdvertising() {
      this.advertisementBool = false;
      document.body.style.overflow="";        // 给body添加 溢出隐藏
    }
  },
  // watch: {
  //   advertisementBool(data) {
  //     console.log(data);
  //     console.log("watch");
  //   }
  // },
  created () {
    var _this=this;
    _this.$get("goods/list"
    ).then(res=>{
      _this.goodsList=res.data.goodsList;
    })
    if(_this.$Cookie.getCookie("token") != undefined) {
      if(_this.$store.state.indexBool) {
        // 请求购物车后台数据
        _this.$get(`cart/${_this.$Cookie.getCookie("userID")}`).then(res=>{
          if(res.code == 200){
            let datas = [];
            for( let i = 0; i < res.data.length; i++) {
              let idNums = {goods_id: res.data[i].goods_id, num: res.data[i].num};
              datas.push(idNums);
            }
            _this.$store.commit("goods", datas);
            _this.$store.commit("index", false);
          }
        })
      }
    }
    // 判断是否打开广告
    if(_this.advertisementBool) {
      _this.openTheAd();
    }
  },
  mounted() {
    // 监听窗口变化，使得轮播图高度自适应图片高度
    window.addEventListener("resize", () => {
      this.height = this.$refs.image[0].height;
    });
  }
};
</script>

<style lang="less" scoped>
@import "../../public/css/magnific-popup.css";

#indexID {
  min-width: 1190px;
}
// 背景视频
.background_video {
  font-size: 0px;
  width: 100%;
  position: relative;
  video {
    width: 100%;
    height: 100%;
  }
  .main-head {
    position: absolute;
    top: 44%;
    width: 100%;
    h1 {
      margin: 50px 0px;
      text-transform: none;
      font-size: 30px;
    }
    .head_division {
      text-align: center;
      .head_h4 {
        text-transform: none;
        display: inline-block;
        padding: 0px 25px 15px;
        margin: 0px;
        border-bottom: 2px solid #222;
        color: black;
        font-size: 30px;
      }
    }
    .btn-lg{
      padding: 16px 20px !important;
      border-radius: 0px;
      font-size: 16px;
    }
    .btn-primary {
        color: black;
        background-color: transparent;
        border-color: black;
    }
    .btn-primary:hover {
        color: white;
        background-color: black !important;
        border-color: white;
    }
    .btn-primary:focus {
      background-color: transparent;
    }
  }
}
// 作品集
.text-center {
  margin-top: 80px;
  h2 {
    color: black;
  }
  h6 {
    display: inline-block;
    padding: 10px 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid black;
    color: black;
  }
}
// 商品列表
.g_row_ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 50px;
  li{
    // border-radius: 10px;
    width: 26%;
    margin-top: 50px;
    transition-duration: 1s;

    img{
      // border-radius: 10px;
      height: 305px;
      width: 100%;
    }
    .portfolio_ul_h4 {
      height: 60px;
      line-height: 50px;
      padding-top: 10px;
      // margin-bottom: 20px;
      padding-left: 15px;
      padding-right: 15px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      font-size: 15px;
      color: black;
      margin: 0px;
      font-size: 17px;
    }
    span{
      color: #E2B972;
      display: inline-block;
      margin-bottom: 20px;
      font-size: 16px;
    }
  }
}
.g_row_ul::after {
    content: '';
    display: block;
    width: 26%;
}
.g_row_ul li:hover{
  transform:translateY(-10px);
  transition-duration: 1.5s;
  box-shadow: 0px 8px 12px 3px #4E5454;
}
// 商品列表结束
.more {
  display: block;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 0 auto;
  border: 1px solid #000;
  margin-bottom: 100px;
  color: black;
}

.more:hover {
  color: #fff;
  background-color: #000;
  text-decoration: none;
}
.morebottom {
  margin-top: 70px;
  text-decoration: none;
}
.row{
  justify-content: space-between;
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;
}
.row2{
  margin-top: 20px;
  margin-bottom: 20px;
}
.team-member{
  margin-bottom: 60px;
  .img-responsive{
    margin: auto;
  }
  
}
.col-md-4{
  width: 30%;
  p{
    text-align: left;
  }
}
.port_article{
  padding-top: 50px;
}

// .menban{
//   background-color: #fff;
//   opacity: 0.9;
//   .head_division{
//     margin-top: 50px;
//   }
//   .btn-lg{
//     margin-bottom: 40px;
//     border: 1px #999 solid !important;
//   }
// }

// 商品
.container{
  padding: 0px !important;
}
.index_links {
  margin: 0px 80px;
  margin-bottom: 40px;
}
.advertisement {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  background-color: rgba(000, 000, 000, 0.5);
  // background-color: red;
  .carousel {
    border: 1px solid red;
    width: 300px;
    margin: auto;
    margin-top: 255px;
    position: relative;
  }
  .el-icon-circle-close {
    position: absolute;
    font-size: 28px;
    right: -50px;
    top: -50px;
  }
  .el-carousel__item {
    img {
      width: 100%;
      height: auto;
    }
  }
}
// /deep/ .el-carousel__container {
//   height: auto;
// }
</style>